<template>
  <div class="list-item" @click="onDetail">
    <div class="i-top">
      <div class="round"><img src="@/assets/images/store.png" /></div>
      <span class="overLine color-black">{{ itemData.marketName }}</span>
    </div>
    <div class="address" v-if="showAddress">
      <img class="icon" src="@/assets/images/position.png" />
      <div class="overLine">
        {{ showAddress }}
      </div>
    </div>
    <div class="tags" v-if="itemData.cityLevel">
      <span class="tag-rd">{{ getDictName('CITY_LEVEL', itemData.cityLevel) }}</span>
    </div>
    <div class="content">
      <div>
        数据来源:<span class="color-black">{{ getDictName('CTM_MARKET_DATA_FROM', itemData.dataSource) }}</span>
      </div>
      <div>
        市场属性:<span class="color-black">{{ getDictName('MARKET_NATURE', itemData.marketNatrue) }}</span>
      </div>
      <!-- <div>
        办事处任务分配状态:<span class="color-black">{{ itemData.taskStatus }}</span>
      </div> -->
      <div>
        启用状态:<span class="color-black">{{ itemData.enable === 1 ? '启用' : '停用' }}</span>
      </div>
      <div>
        是否完成招商:<span class="color-black">{{ itemData.isAttractInvestment === 1 ? '是' : '否' }}</span>
      </div>
    </div>
    <div class="btns">
      <div
        class="btn radius-larg ctm-btn-grey-outline"
        @click.stop="onEnable"
        v-if="itemData.enable === 0 && itemData.dataSource === 'D'"
      >
        启用
      </div>
      <div
        class="btn radius-larg ctm-btn-grey-outline"
        @click.stop="onDisable"
        v-if="itemData.enable === 1 && itemData.dataSource === 'D'"
      >
        停用
      </div>
      <div class="btn radius-larg ctm-btn-grey-outline" @click.stop="onEdit" v-if="itemData.isAttractInvestment !== 1">
        编辑
      </div>
      <!-- && itemData.allocationStatus !== 'B' -->
    </div>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue'
  export default defineComponent({
    name: 'BlankMarketItem',
    props: {
      itemData: {
        type: Object,
        default: () => {}
      },
      dictData: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const onDisable = () => {
        emit('disable')
      }

      const onEdit = () => {
        emit('edit')
      }
      const onEnable = () => {
        emit('enable')
      }

      const onDetail = () => {
        emit('detail')
      }

      const showAddress = computed(() => {
        const { provinceName = '', cityName = '', districtName = '', streetName = '' } = props.itemData
        return `${provinceName}${cityName}${districtName}${streetName}`
      })

      const getDictName = (dictType: string, code: any) => {
        if (!dictType || [undefined, null, ''].includes(code)) return ''
        let name = code
        const dictList = props.dictData[dictType] || []
        if (dictList.length > 0) {
          const obj = dictList.find((v: any) => v.dictCode === `${code}`)
          name = obj?.dictName || code
        }
        return name
      }

      return {
        onDisable,
        onEdit,
        onEnable,
        onDetail,
        getDictName,
        showAddress
      }
    }
  })
</script>
<style lang="less" scoped>
  .list-item {
    margin-bottom: 8px;
    padding: 16px;
    background: var(--bg-global-weaker);
    border-radius: 8px;
    font: var(--font-main-body);
    color: var(--texticon-default-stronger);

    .i-top {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      height: 24px;
      font: var(--font-main-title-strengthen);

      .round {
        width: 24px;
        height: 24px;
        background: var(--texticon-color-warning-normal);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;

        img {
          width: 16px;
          height: 16px;
        }
      }

      span {
        flex: 1;
      }
      .icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }

    .address {
      display: flex;
      align-items: center;
      margin-top: 4px;
      height: 20px;
      margin-bottom: 6px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .tag-rd {
        display: inline-flex;
        padding: 2px 4px;
        margin-right: 2px;
        margin-bottom: 2px;
        border-radius: 2px;
        background: var(--bg-focusing-brand);
        font: var(--font-main-body);
        color: var(--texticon-color-brand-normal);
      }
    }
    .content {
      margin-top: 6px;
      div {
        padding: 2px 0;
        display: flex;
        justify-content: space-between;

        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        line-height: 20px;
      }
    }

    .btns {
      display: flex;
      justify-content: flex-end;

      .btn {
        width: 88px;
        height: 36px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
      }
    }
  }
</style>
